html,body{
  height: 100%;
  margin: 0;
  padding: 0;
  
}

body{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0061c0+3,002147+53,0d1020+100 */
  background: #0061c0; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #0061c0 3%, #002147 53%, #0d1020 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  #0061c0 3%,#002147 53%,#0d1020 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  #0061c0 3%,#002147 53%,#0d1020 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0061c0', endColorstr='#0d1020',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  font-family: Helvetica,Arial,"Hiragino Sans GB","Microsoft Yahei","微软雅黑",STHeiti,"华文细黑",sans-serif;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-v {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-h-r {
  -webkit-box-orient: horizontal reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-h {
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-align-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-align-end{
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-pack-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-pack-around {
  -webkit-box-pack: distribute;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flex-pack-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex-self-end {
  -webkit-flex-item-align: end;
  align-self: flex-end;
}

.flex-self-center {
  -webkit-flex-item-align:  center;
  align-self: center;
}

.flex-content-start {
  -webkit-flex-line-pack: start;
  align-content: flex-start;
}

.flex-flow-row-wrap {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-wrap-wrap {
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.two{
  margin-top: 2.4rem;
}
.two, .one, .three {
  position: relative;
  
}
.tips{
  width: 5rem;
  line-height: 0.6rem;
  color: #ffffff;
  text-align: center;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00dbfb+0,007fea+100 */
  background: #00dbfb; /* Old browsers */
  background: -moz-linear-gradient(top,  #00dbfb 0%, #007fea 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #00dbfb 0%,#007fea 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #00dbfb 0%,#007fea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dbfb', endColorstr='#007fea',GradientType=0 ); /* IE6-9 */
  font-size: 0.3rem;
  margin-bottom: -0.5rem;
  font-weight: bold;
  margin: 0.3rem auto;
}
.two .map-warp{
  text-align: center;
  position: relative;
}
.two .map-warp img.map{
  width: 8rem;
}
.two .map-warp .location{
  width: 0.7rem;
  position: absolute;
  left: 50%;
  top: 50%;
  animation: location 1s;
  -moz-animation: location 1s;	/* Firefox */
  -webkit-animation: location 1s;	/* Safari 和 Chrome */
  -o-animation: location 1s;	/* Opera */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; /* Safari 和 Chrome */
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in; /* Safari 和 Chrome */
}
.two .map-warp .location.bgs{
  margin-left: -2.8rem;
  margin-top: -1.8rem;
}
.two .map-warp .location.xmk{
  margin-left: -2.2rem;
    margin-top: -0.3rem;
  animation: location 1.5s;
  -moz-animation: location 1.5s;	/* Firefox */
  -webkit-animation: location 1.5s;	/* Safari 和 Chrome */
  -o-animation: location 1.5s;	/* Opera */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; /* Safari 和 Chrome */
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in; /* Safari 和 Chrome */
}
.two .map-warp .location.djks{
  margin-left: 0.6rem;
  margin-top: -2.8rem;
  animation: location 1.5s;
  -moz-animation: location 1.5s;	/* Firefox */
  -webkit-animation: location 1.5s;	/* Safari 和 Chrome */
  -o-animation: location 1.5s;	/* Opera */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; /* Safari 和 Chrome */
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in; /* Safari 和 Chrome */
}
.two .map-warp .location.wlks{
  margin-left: 0.9rem;
  margin-top: -0.3rem;
}


@keyframes location
{
  0%   { top: 51%}
  50% {top: 50%;}
  100%   { top: 51%}
}

@-moz-keyframes location /* Firefox */
{
  0%   { top: 51%}
  50% {top: 50%;}
  100%   { top: 51%}
}

@-webkit-keyframes location /* Safari 和 Chrome */
{
  0%   { top: 51%}
  50% {top: 50%;}
  100%   { top: 51%}
}

@-o-keyframes location /* Opera */
{
  0%   { top: 51%}
  50% {top: 50%;}
  100%   { top: 51%}
}

.location-hover {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
}
.location-hover.sj{
  width: 5.75rem;
  margin-left: -8.2rem;
  margin-top: -3.7rem;
}
.location-hover.wg{
  width: 6.3rem;
    margin-left: -8.14rem;
    margin-top: -0.3rem;
}

.location-hover.xxhzr{
  width: 7rem;
  margin-left: 1.25rem;
  margin-top: -0.2rem;
}

.location-hover.djjs{
  width: 5.75rem;
  margin-left: 0.95rem;
  margin-top: -4.6rem;
}


.three .three-warp .title{
  font-size: 0.38rem;
  font-weight: bold;
  color: #fff;
  width: 8rem;
  background: #00C7BF;
  text-align: center;
  line-height: 0.8rem;
}
.three .three-warp .subTitle{
  font-size: 0.26rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-top: 0.3rem;
}
.icon-list .icon-section{
  text-align: center;
}
.icon-list .icon-section .icon-item{
  width: 2rem;
}
.icon-list .icon-section .icon-item.dun{
  width: 3rem;
}

.top{
  width: 3rem;
  margin: 0 auto;
  display: block;
}
.three .three-warp{
  margin-top: 2rem;
}

.one .title{
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: bold;
  text-align: center;
}
.one .title-en{
  color: #ffffff;
  font-size: 0.34rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.3rem;
}

.one .intro{
  color: #ffffff;
  font-size: 0.28rem;
  text-align: center;
  margin-top: 0.5rem;
}
.one .intro .name{
  font-weight: bold;
}
.one .intro .cont{
  font-weight: 100;
  margin-top: 0.3rem;
}

.one .module-list{
  margin-top: 0.36rem;
  text-align: center;
}
.one .module-list .module-item{
  width: 3rem;
}
.one .sub-title{
  color: #ffffff;
  font-size: 0.28rem;
  text-align: center;
  margin-top: 0.5rem;
}

.ico-msg{
  text-align: center;
  display: none;
}
.ico-msg img{
  width: 10rem;
}

.icon-02{
  text-align: center;
}
.icon-02 img{
  width: 90%;
  max-width: 16rem;
}